<template id="dialog-importCarInfo">
	<v-dialog v-model="dialog" persistent max-width="600px">
		<v-card>
			<v-card-title class="text-h5"> 车辆导入 </v-card-title>

			<v-card-text>
				<custom-upload ref="customUpload" @on-upload="handleUpload"></custom-upload>
				<!-- <v-file-input counter hide-input truncate-length="42" prepend-icon="mdi-plus"></v-file-input> -->
			</v-card-text>

			<v-divider></v-divider>

			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn color="primary" text @click="handleImport"> 确认 </v-btn>
				<v-btn text @click="close"> 取消 </v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>
{% include 'component/upload/custom-upload.html' %}
<script type="module">
	Vue.component("dialog-importCarInfo", {
		template: "#dialog-importCarInfo",
		props: {
			headers:Array,
			excludeColumn:Array
		},
		data: () => ({
			dialog: false,
			importFile: null,
			carColumnDict: [
				{
					key: "carNumber",
					value: "车牌号",
				},
				{
					key: "carInProject",
					value: "所在项目",
				},
				{
					key: "carModel",
					value: "厂型号",
				},
				{
					key: "configurationName",
					value: "官方配置名称",
				},
				{
					key: "engineNo",
					value: "发动机号",
				},
				{
					key: "VIN",
					value: "车架号",
				},
				{
					key: "registrationDate",
					value: "登记日期",
				},
				{
					key: "carType",
					value: "汽车类型",
				},
				{
					key: "carDisplacement",
					value: "汽车排放量",
				},
				{
					key: "carSeats",
					value: "核定载客",
				},
				{
					key: "carPurchasePrice",
					value: "汽车购置价",
				},
				{
					key: "carColor",
					value: "汽车颜色",
				},
				{
					key: "carVolume",
					value: "汽车体积",
				},
				{
					key: "InspectValidityEndDate",
					value: "年检有效期",
				},
				{
					key: "fileNumber",
					value: "备案卡号",
				},
				{
					key: "currentMileage",
					value: "车辆里程数",
				},
			],
		}),
		computed: {
			cHeader() {
				let headers = this.headers.filter(header => !_.includes(this.excludeColumn,header.text))
                return headers.map(item => {
					return {
						value:item.text,
						key:item.value
					}
				})
			},
		},
		watch: {},
		async created() {},
		async mounted() {},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					case "open":
						await this.open(uiActionData);
						break;
					case "close":
						await this.close();
						break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},

			async open(uiActionData) {
				this.dialog = true;
			},
			async close() {
				this.isRequestDrawerShown = false;
				this.importData = null;
				// this.fileName = ""
				this.$refs.customUpload.clearFile()
				this.dialog = false
			},
			
			async handleImport() {
				try {
					let jsonData = await excelUtil.importData(this.importFile);
					let headerColumn = this.getHeaderColumn(jsonData[0]);
					let importData = [];
					_.forEach(jsonData, (item, index) => {
						if (index != 0) {
							// 跳过表头
							importData.push(_.zipObject(headerColumn, item));
						}
					});
					importData = _.map(importData,(item) => {
						let {registrationDate,InspectValidityEndDate} = item
						registrationDate = this.parseExcelDate(registrationDate);
						InspectValidityEndDate = this.parseExcelDate(InspectValidityEndDate);
						return {
							...item,
							registrationDate:dayjs(registrationDate).format("YYYY-MM-DD"),
							InspectValidityEndDate:dayjs(InspectValidityEndDate).format("YYYY-MM-DD"),
							
						}
					})
                    this.$emit("onData",importData)
					this.close()
				} catch (error) {
					console.log("error", error);
					await window.vtoast.success("文件解析失败");
				}
			},
			// 将excle的日期对象转成js的Date对象
			parseExcelDate(numericDate) {
				if(numericDate){
					return new Date((numericDate - 25569) * 86400 * 1000);
				}
				
			},
			// 将excel的第一行表头转成数据库字段名
			getHeaderColumn(headerArr) {
				let headerColumn = _.fill(headerArr.length, "");
				_.forEach(this.cHeader, item => {
					let index = _.findIndex(headerArr, column => item.value == column);
					console.log(index,item)
					if (index != -1) {
						headerColumn[index] = this.cHeader[index].key;
					}
				});
				return headerColumn;
			},
			handleUpload(file){
				// debugger
				this.importFile = file
			}
		},
	});
</script>
<style scoped="">
	.upload-box {
		width: 200px;
		height: 200px;
		padding-top: 60px;
		border: 1px dashed #8c939d;
		border-radius: 5px;
		background-color: #fbfdff;
	}
	.mdi-plus:before {
		/* content: "\F39A"; */
		color: #8c939d;
		font-size: 40px;
	}
	.v-input {
		justify-content: center;
	}
	.files {
		color: #4caf50;
	}
</style>
